<template>
  <div class="page-container">
    <div class="title">Select 选择器</div>
    <div class="desc">当选项过多时，使用下拉菜单展示并选择内容。</div>

    <p class="item-title">基础</p>
    <div class="page-item">
      <jhb-select placeholder="请选择" v-model="value">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </jhb-select>

      <jhb-select
        v-model="value"
        placeholder="请选择"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-select>

      <jhb-select
        disabled
        v-model="value"
        placeholder="请选择"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-select>

    </div>

    <p class="item-title">基础搜索</p>
    <div class="page-item">
      <jhb-select
        v-model="value"
        filterable
        placeholder="请搜索"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-select>

      <jhb-select
        v-model="value"
        filterable
        placeholder="请搜索"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-select>

      <jhb-select
        filterable
        disabled
        v-model="value"
        placeholder="请搜索"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-select>
    </div>

    <p class="item-title">基础多选</p>
    <div class="page-item">
      <jhb-select
        multiple
        v-model="value1"
        placeholder="请输入内容"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </jhb-select>

      <jhb-select
        disabled
        v-model="value1"
        placeholder="请输入内容"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-select>
    </div>

    <p class="item-title">级联级联选择器</p>
    <div class="page-item">
      <jhb-cascader
        v-model="value4"
        :options="options4"
        placeholder="请选择"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-cascader>

      <jhb-cascader
        v-model="value4"
        :options="options4"
        placeholder="请选择"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-cascader>
      
      <jhb-cascader
        v-model="value4"
        :options="options4"
        placeholder="请选择"
        @input="handleInput"
        @focus="handlefocus"
        @change="handleChange"
        @blur="handleblur"
        @clear="handleClear"
      ></jhb-cascader>
    </div>
  </div>
</template>

<script>
import jhbSelect from "pkgs/JHB-select/src";
import jhbCascader from "pkgs/JHB-cascader/src";
export default {
  components: {
    jhbSelect,
    jhbCascader,
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
          disabled: true,
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      value1: "",
      value4: [],
      required: {
        visible: true,
        showRequiredError: true,
        labelStyle: {
          width: "70px",
        },
        label: "姓名",
      },
      tipTitle: "这是一段用来提醒的文字",
      options4: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleInput(e) {
      console.log("handleInput========", e);
    },
    handlefocus(e) {
      console.log("handlefocus========", e);
    },
    handleChange(e) {
      console.log("handleChange========", e);
    },
    handleblur(e) {
      console.log("handleblur========", e);
    },
    handleClear(e) {
      console.log("handleClear========", e);
    },
  },
};
</script>

<style lang="scss" scoped>
  .page-container {
    display: flex;
    flex-direction: column;
    .title {
      font-size: 28px;
      font-weight: 400;
      color: #1f2f3d;
    }
    .desc {
      font-size: 14px;
      color: #5e6d82;
      padding: 14px 0;
      border-bottom: 1px solid #ebebeb;
      margin-bottom: 20px;
    }
    .item-title {
      font-size: 20px;
      margin: 26px 0;
      font-weight: 400;
      color: #1f2f3d;
    }
    .item-title:first-child {
      margin-top: 0;
    }
    .page-item {
      display: flex;
      // justify-content: space-between;
      align-items: center;
    }
  }
</style>
